<template>
  <div id="app">
    <div style="width: 100%; height: 200px;" ref="main2"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
    },
  },
  data() {
    return {
      popsList: [],
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    initInfo(item) {
      // console.log(item, "itemitemitemitemitem");
      this.drawChart();
    },
    drawChart() {
        // 基于准备好的dom，初始化echarts实例
        let that = this;
        var series =[]
        // 处理百分比数据 
        let gdpGrowthData = that.data[3].map((percentageStr) => {     
          return parseFloat(percentageStr.replace('%', ''));
        });
        that.data[4].forEach((item, index) => {
          series.push({
            name: item.name,
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 10,
            stack: 'Ad',
            data: that.data[4][index].value
          })
        })
        series.unshift(
          {
            name: '全市GDP',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 10,
            data: that.data[2],
            itemStyle: {
              normal: {
                color: '#70FFD2'
              },
            },
          },
          {
            name: 'GDP增速',
            data: gdpGrowthData,
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              normal: {
                color: '#2585FC'
              },
            }
          }
        )
        // let myChart = this.$echarts.init(document.getElementById('main2'));
        let myChart = this.$echarts.init(this.$refs.main2);
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            textStyle:{
              fontSize: 15,//字体大小
              color: '#38BBEE'//字体颜色
            },
            data: ['全市GDP', 'GDP增速']
          },
          color: that.data[1],
          grid: {
            top: '18%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: that.data[0],
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              // name: '总和',
              color: '#38BBEE',
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
                formatter: '{value} '
              },
            },
            {
              type: 'value',
              // name: '增长率',
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
                formatter: '{value} %'
              },
              axisLine: {
                show: false,
                // lineStyle: {
                //   color: '#666'
                // },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#666'
                }
              },
            }
          ],
          series: series
        };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="scss">
#main2 {
//   margin-top: 10px;
}
</style>
